{% extends "layouts/base.html" %} {% block title %} Page User {% endblock %}

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %} {% block content %}
<div class="row">
  <button
    onclick="window.location.href = '/task/{{task.id}}'"
    class="btn btn-primary pull-left"
  >
    返回
  </button>
</div>
<div class="row">
  <div class="table-responsive col-md-6">
    <table class="table table-hover">
      <thead class="text-primary">
        <th>评测指标</th>
        <th>值</th>
      </thead>

      <tbody>
        <tr>
          <td>TP</td>
          <td>{{static_info.TP}}</td>
        </tr>
        <tr>
          <td>FP</td>
          <td>{{static_info.FP}}</td>
        </tr>
        <tr>
          <td>TN</td>
          <td>{{static_info.TN}}</td>
        </tr>
        <tr>
          <td>FN</td>
          <td>{{static_info.FN}}</td>
        </tr>
        <tr>
          <td>Accuracy</td>
          <td>{{static_info.Accuracy}}</td>
        </tr>
        <tr>
          <td>Precision</td>
          <td>{{static_info.Precision}}</td>
        </tr>
        <tr>
          <td>Recall</td>
          <td>{{static_info.Recall}}</td>
        </tr>
        <tr>
          <td>F1</td>
          <td>{{static_info.F1_score}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
{% load static %}
<script src="{% static '/assets/js/echarts.min.js' %}"></script>

<div id="loss_plot" style="width: 600px; height: 400px"></div>
<div id="graph_plot" style="width: 600px; height: 400px"></div>
{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("loss_plot"));

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: "训练过程的损失变化曲线",
    },
    grid:{
      left: "10%",
      right: "14%",
    },
    tooltip: {trigger: "axis"},

    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    legend: {
      data: ["最佳值","平均值"],
    },
    xAxis: {
      name: "迭代次数",
      data: {{xaxis}},
    },
    yAxis: {
      name: "损失值",
    },
    series: [
      {
        name: "最佳值",
        type: "line",
        data: {{loss_data.convergence.best}},
      },
      {
        name: "平均值",
        type: "line",
        data: {{loss_data.convergence.mean}},
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  var graphChart = echarts.init(document.getElementById("graph_plot"));
  var option2 = {
    title: {
      text: '基因有向图'
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [
      {
        type: 'graph',
        layout: 'none',
        symbolSize: 50,
        roam: true,
        label: {
          show: true
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        edgeLabel: {
          fontSize: 20
        },
        data: [
        {% for data in graph_data.data%}
          {
            name: '{{data.name}}',
            x: Math.random() * 1000,
            y: Math.random() * 1000
          },
        {% endfor %}
        ],
        // links: [],
        links: [
        {% for link in graph_data.links%}
          {
            source: {{link.source}},
            target: {{link.target}},
          },
        {% endfor %}
        ],
        lineStyle: {
          opacity: 0.9,
          width: 2,
          curveness: 0
        }
      }
    ]
  };
  graphChart.setOption(option2);
</script>
{% endblock javascripts %}
